<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>首页</title>
<link href="/Public/css/event/yq.css" type="text/css" rel="stylesheet" />
<link href="/Public/css/event/font.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/Public/js/event/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Public/js/event/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/Public/js/event/yqmain.js"></script>
<script>
$(function(){
    var _w = parseInt($(window).width());//获取浏览器的宽度
    var scrollHeight;

    $(".actHeader img").load(function() {
        realHeight = this.height;
        scrollHeight=realHeight+39;
    });

    $(window).scroll(function() {
        if($(window).scrollTop()>=scrollHeight){
            $(".searchBox").addClass("searchfixed");
        }else{
            $(".searchBox").removeClass("searchfixed");
        }
	});
});
</script>
<script type="text/javascript">
$(function() {
    /*瀑布流开始*/
    var container = $('#ulTeacher');
    var loading = $('#imloading');
    // 初始化loading状态
    loading.data("on", true);				
    /*模拟从后台获取到的数据*/
    var sqlJson = {$result|json_encode};
    sqlJson = eval( sqlJson );

    sqlJson.shift();
    sqlJson.shift();
    sqlJson.shift();

    var load = function( sqlJson ){
        if ( !sqlJson.length ) {
            loading.text('只有这么多了！');
        } else {
            var html = "";
            var count = 3;
            //for (var i in sqlJson) {
            while( sqlJson.length && count ){
                var organiztion = sqlJson.shift();
                html +="<li class='liteacher'>"+ "<div class='memberAll'><div class='memberPic'><img src='/Public/images/event/" + organiztion.headimg + "'></div>";
                html +="<div class='memberinfo'><div class='divHtitle'>"+organiztion.name+"</div>";
                html +="<div class='syValue'><span>"+organiztion.praise+"</span><em>活力值</em></div>";
                var members = organiztion.member.split( ',' );
                html +="<div class='syMember'>组员:<span>"+members[0]+"</span><span>"+members[1]+"</span></div>";
                html +="<div class='syMember'>得分:<span>"+organiztion.score+"</span></div></div></div>";
                html +="<div class='syBtn' onclick='view.index.firstShouldOnline("+organiztion.id+")'>为TA打分</div></li>";
                count--;
            }
            //}
            /*模拟ajax请求数据时延时800毫秒*/
            var time = setTimeout(function() {
                var $newElems = $(html).css({
                    opacity: 0
                }).appendTo(container);
                $newElems.imagesLoaded(function() {
                    $newElems.animate({
                        opacity: 1
                    }, 10);	
                    container.masonry('appended', $newElems, true);
                    loading.data("on", true).fadeOut();
                    clearTimeout(time);
                });
            }, 10)
        }
    }

    var reload = function( result ){
        var waterfull = $( "#waterfull" );
        waterfull.empty();//clear data
        waterfull.append( "<ul id='ulTeacher' class='ulTeacher'></ul>" );
        container = $( '#ulTeacher' );
        sqlJson = eval( result.jsonData );//reload data
        sqlJson.length && loading.text('加载中');
        load( sqlJson );
        $( window ).trigger( 'scroll' );
    }

    $( ".searchBtn" ).unbind( "click" ).bind( 'click', function(){
        var keywords = $( ".search" ).find( "input" ).val();
        yequ.organiztions.search( keywords, reload );
    } );

    $( ".searchDel" ).unbind( 'click' ).bind( 'click', function(){
        var keywords = '';
        $( '.search' ).find( 'input' ).val( keywords );
        yequ.organiztions.search( keywords, reload );
    } );

    $(window).scroll(function() {
        if (!loading.data("on")) return;
        var itemNum = $('#waterfull').find('.liteacher').length;
        var itemArr = [];
        itemArr[0] = $('#waterfull').find('.liteacher').eq(itemNum - 1).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
        itemArr[1] = $('#waterfull').find('.liteacher').eq(itemNum - 2).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
        itemArr[2] = $('#waterfull').find('.liteacher').eq(itemNum - 3).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
        var maxTop = Math.max.apply(null, itemArr);
        if (maxTop < $(window).height() + $(document).scrollTop()) {
            //加载更多数据
            loading.data("on", false).fadeIn();
            (function(sqlJson) {
                if ( !sqlJson.length ) {
                    loading.text('只有这么多了！');
                } else {
                    var html = "";
                    var count = 3;
                    //for (var i in sqlJson) {
                    while( sqlJson.length && count ){
                        var organiztion = sqlJson.shift();
                        html +="<li class='liteacher'>"+ "<div class='memberAll'><div class='memberPic'><img src='/Public/images/event/" + organiztion.headimg + "'></div>";
                        html +="<div class='memberinfo'><div class='divHtitle'>"+organiztion.name+"</div>";
                        html +="<div class='syValue'><span>"+organiztion.praise+"</span><em>活力值</em></div>";
                        var members = organiztion.member.split( ',' );
                        html +="<div class='syMember'>组员:<span>"+members[0]+"</span><span>"+members[1]+"</span></div>";
                        html +="<div class='syMember'>得分:<span>"+organiztion.score+"</span></div></div></div>";
                        html +="<div class='syBtn' onclick='view.index.firstShouldOnline("+organiztion.id+")'>为TA打分</div></li>";
                        count--;
                    }
                    //}
                    /*模拟ajax请求数据时延时800毫秒*/
                    var time = setTimeout(function() {
                        var $newElems = $(html).css({
                            opacity: 0
                        }).appendTo(container);
                        $newElems.imagesLoaded(function() {
                            $newElems.animate({
                                opacity: 1
                            }, 10);	
                            container.masonry('appended', $newElems, true);
                            loading.data("on", true).fadeOut();
                            clearTimeout(time);
                        });
                    }, 10)
                }
            })(sqlJson);
        }
    });
});
</script>
</head>	
<body style="background-color:#fcf3f0">
<!-------------header------------------------->
<div class="mask"></div>
<!------------登录------------------------->
<div class="loginBox borderRadius">
	<span class="icon iconfont icon-chahao spanClose"></span>
    <h1>用户登录</h1>
    <div class="divregist boxSize">
        <input id="username" placeholder="请输入账号" name="username" class="uploadTxt uploadTxtFix"> 
        <div class="tipinfo"></div> 
    </div>
    <div class="divregist login boxSize">
        <input id="password" name="password" type="password" placeholder="请输入密码" class="uploadTxtFix"/>
        <div class="tipinfo"></div> 
    </div>
    <input id="orgId" name="orgId" type="hidden" />
    <span id="registeFailInfo" class="registeFail" style="display:none;">登录失败</span>
    <input type="button" value="立即登录" class="loginBtn borderRadius">
</div>

<div class="actHeader">
	<img alt="" src="/Public/images/event/banner.jpg" width="100%"/>        
</div>
<!-------------header END------------------------->
<!-------------search------------------------->
<div class="searchBox">
    <div class="search">
        <input class="txt"  placeholder="输入队名进行搜索"/>
        <span class="icon iconfont searchDel"></span>
    </div>
    <input type="button" class="searchBtn" value="">
</div>
<!-------------search  END------------------------->
<!-------------main------------------------->
<div id="main">
    <div class="teacherBox" id="waterfull">
        <ul class="ulTeacher" id="ulTeacher">
            <for start="0" end="3">
        	<li class="liteacher">
                <div class="memberAll">
                    <div class="memberPic"><img src="/Public/images/event/{$result[$i]['headimg']}"></div>
                    <div class="memberinfo">
                        <div class="divHtitle">{$result[$i]['name']}</div>
                        <div class="syValue">{$result[$i]['praise']}<em>活力值</em></div>
                        <php>$members = explode( ',', $result[$i]['member'] );</php>
                        <div class="syMember">组员:<span>{$members[0]}</span><span>{$members[1]}</span></div>
                        <div class="syMember">得分:<span>{$result[$i]['score']}</span></div>
                    </div>
                </div>
                <div class="syBtn" onclick="view.index.firstShouldOnline({$result[$i]['id']})" data-organiztion="{$result[$i]['id']}">为TA打分</div>
            </li>
            </for>
        </ul>
    </div>
   <div id="imloading" class="loading">加载中</div>
</div>
<!-------------main END------------------------->
<!-------------botNav------------------------>
<div class="divfooter bot50">
    <p>浙报新媒体技术支持</p>
    <p class="pFooter">浙江日报新闻发展有限公司 | Copyright © 2014 - 2015</p>
</div>
<!-------------botNav END------------------------->
<script type='text/javascript'>
var options = {
    event_id: {$eventId}
}
view.index.init( options );
</script>
</body>
</html>
